<template>
  <view :style="{ height: height + 'px' }" class="pay-popup-header">
    <view style="position: relative; width: 750rpx; height: 74px; overflow: hidden; border-radius: 15px 15px 0 0">
      <image
        src="/static/images/video/pay_popup_head_bg.jpg"
        mode="scaleToFill"
        style="position: absolute; top: 0; left: 0; width: 750rpx; height: 74px; border-radius: 10px 10px 0 0"
      ></image>
      <view style="position: absolute; top: 5px; right: 0; z-index: 2; padding: 10px; margin-right: 6px; margin-bottom: 24px" @click="emits('hideClick')">
        <mxp-icon name="guanbi" color="#666666" size="16px"></mxp-icon>
      </view>
      <view style="position: absolute; bottom: 2px; left: 160rpx; z-index: 2; margin-right: 6px">
        <mxp-button
          :text="agreementName"
          background="#D18D3F"
          size="min"
          :plain="true"
          :plainBackground="false"
          :cusStyle="{ padding: '0px 4px' }"
          @click="emits('agreementClick')"
        >
          <template #right>
            <mxp-icon name="youjiantou" color="#D18D3F" size="10px"></mxp-icon>
          </template>
        </mxp-button>
      </view>
    </view>
    <view
      style="
        z-index: 2;
        box-sizing: border-box;
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 750rpx;
        padding: 10px 15px;
      "
      :style="{ height: `calc(${height}px - 65px)` }"
    >
      <view style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center">
        <view v-if="virtualcoinPrice || virtualcoinPrice === 0" style="display: flex; margin-right: 6px; align-items: flex-end">
          <text style="font-size: 18px; font-weight: bold" :style="{ color: defThemeColor.text }">1{{ unit }}等于</text>
          <text style="font-size: 18px; font-weight: bold" :style="{ color: defThemeColor.primary }">{{ priceVirtualRate }}</text>
          <text style="font-size: 18px; font-weight: bold" :style="{ color: defThemeColor.text }">K币</text>
          <!--<text style="font-size: 12px; color: #999" v-if="devicePlatform === 'ios'">(1钻=0.1元)</text>-->
        </view>
        <view style="margin-top: 4px" v-if="allTotal">
          <text style="font-size: 12px" :style="{ color: defThemeColor.text2 }">本剧共 {{ allTotal }} 集</text>
          <!-- <text style="font-size: 12px; font-weight: bold" :style="{ color: defThemeColor.text2 }"></text>
          <text style="font-size: 12px" :style="{ color: defThemeColor.primary }">{{ ` ${paidTotal} ` }}</text>
          <text style="font-size: 12px" :style="{ color: defThemeColor.text2 }">未解锁</text> -->
        </view>
        <view style="margin-top: 4px; line-height: 20rpx" v-if="allTotal">
          <text style="font-size: 12px" :style="{ color: defThemeColor.text2 }">剩余</text>
          <text style="font-size: 12px; font-weight: bold" :style="{ color: defThemeColor.text2 }"></text>
          <text style="font-size: 12px" :style="{ color: defThemeColor.primary }">{{ ` ${paidTotal} ` }}</text>
          <text style="font-size: 12px" :style="{ color: defThemeColor.text2 }">未解锁</text>
        </view>
      </view>
      <view style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between">
        <view style="display: flex; align-items: center; justify-content: center">
          <image src="/static/public/ico_diamond.png" mode="scaleToFill" style="width: 28px; height: 28px"></image>
          <text style="margin-left: 4px; font-size: 14px; font-weight: bold; color: #fd6e00">我的K币 : {{ userVirtualCoins }}</text>
        </view>
        <view v-if="(virtualcoinPrice || virtualcoinPrice === 0) && allTotal > 0" style="margin-top: 4px">
          <text style="margin-right: 5px; font-size: 12px" :style="{ color: defThemeColor.text2 }">全剧</text>

          <text style="font-size: 12px; font-weight: bold; color: #fd6e00" v-if="devicePlatform === 'ios'">
            {{ virtualcoinPrice === '--' ? virtualcoinPrice : `${Number(virtualcoinPrice) * Number(paidTotal) * 0.1}钻` }}
          </text>
          <text style="font-size: 12px; font-weight: bold; color: #fd6e00" v-else>
            {{ `${Number(virtualcoinPrice) * Number(paidTotal)}K币` }}
            <text v-if="sys.uniPlatform === 'mp-toutiao'">
              <!-- {{ `￥${(Math.ceil(Number(virtualcoinPrice) * Number(paidTotal) * 0.01 * 100) / 100).toString().replace(/\.?0+$/, '')}` }} -->
              {{ `￥${(Math.ceil(Number(virtualcoinPrice) * Number(paidTotal) * 0.01 * 100) / 100).toString()}` }}
            </text>
          </text>
        </view>
        <view v-if="(virtualcoinPrice || virtualcoinPrice === 0) && allTotal > 0" style="margin-top: 4px; line-height: 20rpx">
          <text style="margin-right: 5px; font-size: 12px" :style="{ color: defThemeColor.text2 }">单集</text>
          <text style="font-size: 12px; font-weight: bold; color: #fd6e00" v-if="devicePlatform === 'ios'">
            {{ virtualcoinPrice === '--' ? virtualcoinPrice : `${Number(virtualcoinPrice) * 0.1}钻` }}
          </text>
          <text style="font-size: 12px; font-weight: bold; color: #fd6e00" v-else>
            {{ `${virtualcoinPrice}K币` }}
            <text v-if="sys.uniPlatform === 'mp-toutiao'">
              <!-- {{ `￥${(Math.ceil(Number(virtualcoinPrice) * 0.01 * 100) / 100).toString().replace(/\.?0+$/, '')}` }} -->
              {{ `￥${(Math.ceil(Number(virtualcoinPrice) * 0.01 * 100) / 100).toString()}` }}
            </text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref, shallowRef } from 'vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';
  import mxpGetSysInfoStore from '@/mxp-ui/mxp-tool/store/mxp-store-sys-info';
  import { isNumericLiteral } from 'typescript';
  const sys = mxpGetSysInfoStore().getSysInfo();
  const devicePlatform = computed(() => (sys.value.platform === 'devtools' ? sys.value.osName : sys.value.platform));

  defineOptions({
    name: 'pay-popup-header',
  });
  defineProps({
    /** K币兑换比例 */
    priceVirtualRate: { type: Number, default: 100 },
    /** 协议名称 */
    agreementName: { type: String, default: '' },
    /** 高度 */
    height: { type: Number, default: 74 },
    /** 单集价格 */
    virtualcoinPrice: { type: [Number, String], default: undefined },
    /** 付费集数 */
    paidTotal: { type: Number, default: 1 },
    /** 付费集数 */
    allTotal: { type: Number, default: 1 },
    /** K币余额 */
    userVirtualCoins: { type: [Number, String], default: 1 },
    /** 单位 */
    unit: { type: String, default: '人民币' },
  });

  const emits = defineEmits<{
    (e: 'agreementClick'): void;
    (e: 'hideClick'): void;
  }>();
</script>

<style lang="scss" scoped>
  .pay-popup-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    height: 70px;
    padding-left: 15px;
    overflow: hidden;
  }
</style>
